checkCookie()

//获取商品id
function getId() {
    let url = window.location.href;
    let id = url.split('?')[1].split('=')[1];
    getData(id)
}

//根据商品id查找商品
async function getData(id) {
    let data = await myPromise({
        method: 'get',
        url: 'http://api.yuguoxy.com/api/shop/find',
        data: {
            id
        }
    })
    let {
        resultCode,
        resultInfo
    } = data;

    let yuan = parseInt(resultInfo.price);
    let jiao = parseInt(resultInfo.price & 10);

    let str = `<div class="left">
                <img src="${resultInfo.picture}"
                alt="" >
                <div class="mask"></div>
            </div>
            <div class="right clearfix">
                <div class="title">
                    <img src="./images/tianmao.jpg" alt="">
                    <div>包邮</div>
                    <p>${resultInfo.shop}</p>
                </div>
                <div class="priceInfo">
                    <div>原价￥${resultInfo.oldprice}</div>
                    <div>
                        <span>券后价:</span>
                        <span>￥</span>
                        <span>${yuan}</span>
                        <span>.${jiao}</span>
                        <span>5元券</span>
                        <span>${resultInfo.oldprice}人已买</span>
                    </div>
                </div>
                <div>
                    <span class="cheaptime">优惠有效期:2022-09-05</span>
                </div>
                <div>
                    <button class="addBtn">加入购物车</button>
                    <button class="buyBtn">领券购买</button>
                </div>
            </div>
            <div class="glassArea">
                <img src="${resultInfo.picture}" alt="">
            </div>`;  

    //获取最外层盒子节点
    let oWrap = document.querySelector('.content .container');
    oWrap.innerHTML = str;
    //获取遮罩
    let oMask = oWrap.querySelector('.mask');
    //获取显示盒子
    let oLeft = oWrap.querySelector('.left');
    //获取放大区域盒子
    let oGlassBox = oWrap.querySelector('.glassArea');
    //获取放大区域的图片
    let oGlassPic = oWrap.querySelector('.glassArea>img');

    oLeft.addEventListener('mouseover', function () {
        oMask.style.display = 'block';
        oGlassBox.style.display = 'block';
        // scale
        let glassPicWidth = Math.floor(oLeft.clientWidth * oGlassBox.clientWidth / oMask.clientWidth);
        let glassPicHeight = Math.floor(oLeft.clientHeight * oGlassBox.clientHeight / oMask.clientHeight);
        //改变放大镜区域图片比例
        oGlassPic.style.width = glassPicWidth + 'px';
        oGlassPic.style.height = glassPicHeight + 'px';
    });
    //鼠标移出显示区域，让遮罩消失
    oLeft.addEventListener('mouseout', function () {
        oMask.style.display = 'none';
        oGlassBox.style.display = 'none';
    });
    //在显示区域移动事件
    oLeft.addEventListener('mousemove', function (e) {
        e = e || window.event;
        let x = e.offsetX - oMask.clientWidth / 2;
        let y = e.offsetY - oMask.clientHeight / 2;

        //边界检查
        if (x < 0) {
            x = 0;
        }
        if (x > oLeft.clientWidth - oMask.clientWidth) {
            x = oLeft.clientWidth - oMask.clientWidth;
        }
        if (y < 0) {
            y = 0;
        }
        if (y > oLeft.clientHeight - oMask.clientHeight) {
            y = oLeft.clientHeight - oMask.clientHeight;
        }

        //改变遮罩的位置
        oMask.style.left = x + 'px';
        oMask.style.top = y + 'px';

        //改变放大镜区域背景图的位置
        /*   
                    遮罩水平移动距离                    遮罩的宽
                    ------------                =   ----------------
                    放大镜区域图片水平移动的距离        放大镜区域的宽
             */
        let moveX = x * oGlassBox.clientWidth / oMask.clientWidth;
        let moveY = y * oGlassBox.clientHeight / oMask.clientHeight;

        oGlassPic.style.left = -moveX + 'px';
        oGlassPic.style.top = -moveY + 'px';

    });

    //添加商品到购物车
    let addBtn = document.querySelector('.addBtn');

    addBtn.addEventListener('click', function () {
        let productList = JSON.parse(localStorage.getItem('productList')) || [];

        let newProduct = {
            id: resultInfo.id,
            name: resultInfo.shop,
            url: resultInfo.picture,
            price: resultInfo.price,
            num: 1,
            singlePrice: resultInfo.price,
            state: false //单选状态
        };



        //查找收藏的商品是否已经存在
        let this_product = productList.find(item => {
            return item.id === newProduct.id;
        });

        //如果存在数量加1，不存在则加入
        if (this_product) {
            this_product.num++;
            this_product.singlePrice = (this_product.num * this_product.price).toFixed(2);
        } else {
            let checkAllState = false;
            localStorage.setItem('checkAllState', checkAllState);
            productList.push(newProduct);
        }

        localStorage.setItem('productList', JSON.stringify(productList));

        alert('添加成功')
        window.location.href = '../cart.html';
    });
}
getId()

function checkCookie() {
    if (!getCookie('username')) {
        alert('请先登录');
        window.location.href = "../login.html";
    }
}